<template>
  <t-table
    row-key="id"
    table-layout="auto"
    :data="countStore.getList()"
    :columns="columns"
    :pagination="countStore.page"
    :loading="countStore.page.loading"
    @page-change="({ current }) => countStore.reset(current)"
    hover
  >
    <template #count="{ row }">
      <t-tag :theme="row.count > 0 ? 'primary' : 'warning'" variant="light">{{ row.count }}</t-tag>
    </template>
    <template #time="{ row }">
      {{ row.created_at.date() }}
    </template>
  </t-table>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../index'
  import countStore from '../../store/count'

  const plugin = index.plugin

  const columns = [{
    title: plugin.t('count.account_name'),
    colKey: 'account_name'
  }, {
    title: plugin.t('count.content'),
    colKey: 'content'
  }, {
    title: plugin.t('count.count'),
    colKey: 'count',
    cell: 'count',
    align: 'center'
  }, {
    title: plugin.t('count.time'),
    colKey: 'time',
    cell: 'time'
  }]

  // 首次请求
  countStore.reset(1)
</script>